{% include "header.html" %}
<script>
    $(function () {
        var $load = $('#loading');
        var $years = $('#years');
        var years_html = $years.html();
        var study_flag = true;  // 该值为true表示 是从其他类型转换到自习记录，需要加载时间线

        function loadData(page) {
            var type = $('select#type option:selected').data('type');
            var year_ = $('select#years').val();
            var start = '2018-01-01';
            var end = '2018-01-31';
            if (type === 'study') {
                var y = '2018';
                var m = '3';
                if (study_flag) {
                    var date = new Date();
                    y = date.getFullYear();
                    m = date.getMonth() + 1;
                    $years.html('');
                    for (var i = 1; i <= m; i++) {
                        $years.append("<option " + (i === m ? 'selected' : '') + ">" + y + "年" + i + "月</option>");
                    }
                    study_flag = false;
                } else {
                    y = year_.substr(0, 4);
                    m = year_.charAt(5);
                }
                start = y + "-" + (m < 10 ? '0' : '') + m + "-" + "01";
                end = y + "-" + (m < 10 ? '0' : '') + m + "-" + "31";
            } else {
                $years.html(years_html);
                study_flag = true;
            }

            var data_ = {
                year: year_.substr(0, 4),
                sid: {{ stu.id }},
                start: start,
                end: end
            };
            if (page !== undefined && page >= 1) {
                data_['page'] = page;
            }
            $.ajax({
                url: '/' + type + '/query',
                type: 'post',
                dataType: 'json',
                data: data_,
                beforeSend: function () {
                    $load.removeClass('hidden');
                },
                success: function (data) {
                    fillData(type, data);
                },
                complete: function () {
                    $load.addClass('hidden');
                }
            });
        }
        $('select').change(loadData);

        $('.pagination').on('click', 'li', function (e) {
            e.preventDefault();
            var page = $(this).data('page');
            loadData(page);
        });
    });

    function select_(page) {
        var lis = $('.pagination').find('li');
        $.each(lis, function (k, v) {
            var val = $(v).find('a').text();
            if (!/\W/.test(val)) {
                if (val != page) { // 非严格比较 允许字符串和数字相等
                    $(v).removeClass('active');
                } else {
                    $(v).addClass('active');
                }
            }
        });
    }

    function fillData(type, data) {
        var $tbody = $('table tbody');
        var $page_box = $('#page-div > ul');
        $page_box.html('');
        $tbody.html('');
        $('table > thead > tr td#score').remove();
        if (type === 'work') {
            $('table > thead tr').append('<td id="score">分数</td>');
            if (data.status) {
                $.each(data.result.result, function (k, w) {
                    var tr = '<tr>\n' +
                        '    <td>' + w.k.k_name + '</td>\n' +
                        '    <td>' + w.work_uptime.substr(5, 19) + '</td>\n' +
                        '    <td><span class="' + type + '-' + w.work_status + '"></span></td>\n' +
                        '    <td>' + (w.work_score == -1 ? '未评分' : w.work_score) + '</td>\n' +
                        '</tr>';
                    $tbody.append(tr);
                });
            } else {
                $tbody.append('<tr><td colspan="4"><b style="font-size:16px;">无作业提交记录</b></td></tr>');
            }
        } else if (type === 'record') {
            if (data.status) {
                $.each(data.result.result, function (k, c) {
                    var tr = '<tr>\n' +
                        '    <td>' + c.k.k_name + '</td>\n' +
                        '    <td>' + c.rd_time.substr(5, 19) + '</td>\n' +
                        '    <td><span class="' + type + '-' + c.rd_status + '"></span></td>\n' +
                        '</tr>';
                    $tbody.append(tr);
                });
            } else {
                $tbody.append('<tr><td colspan="3"><b style="font-size:16px;">无签到记录</b></td></td></tr>');
            }
        } else if (type === 'study') {
            if (data.status) {
                $.each(data.result.result, function (k, c) {
                    var tr = '<tr>\n' +
                        '    <td>自习课</td>\n' +
                        '    <td>' + c.datetime + '</td>\n' +
                        '    <td><span class="record-' + c.status + '"></span></td>\n' +
                        '</tr>';
                    $tbody.append(tr);
                });
            } else {
                $tbody.append('<tr><td colspan="3"><b style="font-size:16px;">无自习记录</b></td></td></tr>');
            }
        }
        $('#page-div').addClass('hidden');
        if (data.result.pages > 1) {
            $('#page-div').removeClass('hidden');
            for (var p = 1; p <= data.result.pages; p++) {
                $page_box.append('<li data-page="' + p + '"><a href="javascript:">' + p + '</a></li>');
            }
        }
        select_(data.result.page);
    }
</script>
<div class="container">
    <div class="box box-success">
        <div class="box-header">
            <div class="text-center dropup">
                <span class="h-title">考勤记录</span>
                <div id="loading" class="hidden" style="position: absolute; right: 15px; top: 12px;">
                    <img class="" width="20" src="/static/images/loading.jpg" alt="上传中">
                </div>
            </div>
        </div>
        <div class="box-body">
            <div class="clearfix">
                <div class="select-group pull-left">
                    <select id="years" class="form-control">
                        {% for foo in data.years %}
                            {% if loop.index > 1 %}
                                <option {% if data.years[0] == foo.k_time %}selected{% endif %}>
                                    {{ foo.stu_reg_time }}年度
                                </option>
                            {% endif %}
                        {% else %}
                            <option>无课程</option>
                        {% endfor %}
                    </select>
                </div>
                <div id="type" class="select-group pull-right">
                    <select id="type" class="form-control">
                        <option data-type="record" selected>签到记录</option>
                        <option data-type="work">作业记录</option>
                        <option data-type="study">自习记录</option>
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered text-center">
                    <thead>
                    <tr>
                        <td>课程</td>
                        <td>时间</td>
                        <td>状态</td>
                    </tr>
                    </thead>
                    <tbody>
                    {% if data %}
                        {% for a in data.records.result %}
                            <tr>
                                <td>{{ a.k.k_name }}</td>
                                <td>{{ a.rd_time[5:] }}</td>
                                <td><span class="record-{{ a.rd_status }}"></span></td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="3"><b style="font-size: 16px;">无签到记录</b></td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </div>
            <div id="page-div" class="col-lg-12 col-xs-12 text-center {% if data.records.pages <= 1 %}hidden{% endif %}">
                <ul style="margin: 0;" class="pagination pagination-sm">
                    {% for foo in range(data.records.pages) %}
                        <li data-page="{{ foo + 1 }}" class="{% if foo == data.records.page - 1 %}active{% endif %}">
                            <a href="javascript:">{{ foo + 1 }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            {% include "sign.html" %}
        </div>
    </div>
</div>

</body>
</html>